<template>
    <!--分类导航栏部分-->
    <div>
        <el-radio-group v-model="activeName" size="small" @change="changeCurrentCatalog">
            <el-radio-button :label="c.id" v-for="(c,index) in catalogList" :key="index">{{c.cname}}</el-radio-button>
        </el-radio-group>
    </div>
</template>

<script>
    export default {
        name: "CatalogBar",
        /*
        props: {
            activeName: {
                type: String,
                default: 'all'
            }
        },*/
        data() {
            return {
                activeName: this.$route.params.catalog,  //当前的选择类别
                catalogList: [
                    {
                        "version": 0,
                        "createTime": "2020-11-25 19:24:38",
                        "modifyTime": "2020-11-25 19:24:38",
                        "flag": true,
                        "cid": 1,
                        "id": "all",
                        "cname": "全部",
                        "pid": "top"
                    }
                ]
            }
        },
        mounted() {

            this.$store.dispatch("QueryCatalogList").then(response => {

                let code = response.data.code;
                if (code === 200) {
                   //this.catalogList = response.data.data;
                   for(let i=0;i<response.data.data.length;i++){
                       this.catalogList.push(response.data.data[i]);
                   }

                   this.changeCurrentCatalog();
                } else if (code === 400) {

                }
            })
            .catch(() => {
                //this.loading = false;
            });


        },

        methods:{
            changeCurrentCatalog(){
               this.$store.commit("setCurrentCatalog",this.activeName);
               //触发父组件的一个方法
               this.$emit("refreshCourseList");
               this.$emit("refreshArticleList");
            }
        }
    }
</script>

<style scoped>

</style>